<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Your description goes here" />
	<meta name="keywords" content="your,keywords,goes,here" />
	<meta name="author" content="Your Name / Original design by andreasviklund.com" />
	<link rel="stylesheet" type="text/css" href="variant-multi.css" title="Variant Multi" media="all" />
	<title>Variant Multi</title>
</head>

<body>
<div id="containerfull"><!-- Use"containerfull" for 100% width. For fixed width, use "container980", "container760" or "container600" (the number is the layout width in pixels). -->
	<div id="header">
		<h1><a href="index.html">Variant Multi</a></h1>
		<h2>When you want more than just a single layout...</h2>
	</div>
	<div id="menu"> 
		<ul>     
			<li><a href="index.html">980px width</a></li>
			<li><a href="760px.html">760px width</a></li>
			<li><a href="600px.html">600px width</a></li>
			<li><a class="current" href="full.html">100% width</a></li>
		</ul>
	</div>
	
	<div id="feature">
		<div class="left">			
			<h2>Feature #1</h2>
			<p>This area can be used to put something special in focus. Products, a presentation or anything you may want to highlight. If not needed, this area can be removed completely.</p>
		</div>

		<div class="right">
			<h2>Feature #2</h2>
			<p>Use div class="left" and "right" for two columns, or remove the two extra div:s to use a single column here.</p>
		</div>
		<div class="clear">&nbsp;</div>
	</div>

	<div id="main">
		<div id="sidebar">
			<div class="sidebarbox">
               <h2>Sidebar menu</h2>
				<ul class="sidemenu">
					<li><a href="index.html">Sidebar link</a></li>
					<li><a href="#">Subpages supported</a>
						<ul>
							<li><a href="index.html">Subpage one</a></li>
							<li><a href="examples.html">Subpage two</a></li>
						</ul></li>
					<li><a href="#">Last page</a></li>
				</ul>
			</div>

			<div class="sidebarbox">
				<h2>Text box</h2>
				<p>This is a sidebar text box. It can be used for regular links:</p>
				<ul>
					<li><a href="http://andreasviklund.com/templates/">More free templates</a></li>
					<li><a href="http://andreasviklund.com/blog/">Andreas' blog</a></li>
				</ul>
			</div>
		</div>

		<div id="content">
			<h2>About this template</h2>
			<p>This is Variant Multi, a free website template by Andreas Viklund. It was designed to provide a quite popular design (header with horizontal menu, feature area, 2- or 3-column content area with sidebar and a multi-column footer area) with a number of layout options for both the different areas of the site and for the layout width. The default style is 980 pixels wide. Pre-defined styles are available for fixed widths of 760 and 600 pixels, as well as a full-width (100%) layout, use the navigation menu to see the different widths.</p>

			<div class="left">			
				<h3>A free template</h3>
				<p>Like all templates from andreasviklund.com, Variant Wide is free to use for any purpose.</p>
				<p>For more information, tips and additional resources, visit <a href="http://andreasviklund.com/">andreasviklund.com</a>.</p>
			</div>

			<div class="right">
				<h3>Built for speed</h3>
                <p>The code is all valid XHTML 1.0 Strict, and since no images have been used in this template it loads fast even on slower connections. The template has been tested in all major browsers including on mobile devices, and it should work well no matter where it is displayed.</p>
			</div>
			<div class="clear">&nbsp;</div>
		</div>
		<div class="clear">&nbsp;</div>
	</div>

	<div id="footer">
		<div id="footersections">
			<div class="half">
				<h2>Footer area #1</h2>
				<p>This area uses the div class="half". You can replace it with two div:s if you give them class="quarter" to get a 4-column footer, or replace the two following div:s with one div with class="lasthalf" to get a 2-column footer. In this file, I have combined the "half", "quarter" and "lastquarter" classes.</p>
			</div>

			<div class="quarter">
				<h2>Footer area #2</h2>
				<p>This area uses the div class="quarter".</p>
				<p>Paragraphs and <a href="#">links</a> work here too.</p>
			</div>

			<div class="lastquarter">
				<h2>Footer menu</h2>
				<ul>
					<li><a href="index.html">Link #1</a></li>
					<li><a href="index.html">Link #2</a></li>
				</ul>	
			</div>     
			<div class="clear">&nbsp;</div> 
		</div>
	</div>   

	<div id="credits">
		<p>&copy; Your Name<br />
		<span class="small">Template design by <a href="http://andreasviklund.com/">Andreas Viklund</a></span></p>
	</div>  
</div>
</body>
</html>
